<template>
	<view class="container">
		<uni-forms ref="dataForm" label-width="300rpx" :modelValue="dataForm" :rules="rules" label-position="top">
			<uni-forms-item label="留校原因:" required name="yuanying">
				<uni-easyinput type="textarea" v-model="dataForm.yuanying" placeholder="请说明留校原因..."></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="计划留校开始时间:" required name="startTime">
				<uni-datetime-picker type="datetime" v-model="dataForm.startTime" @change="changeLog" placeholder="请输入计划留校开始时间"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item label="计划留校结束时间:" required name="endTime">
				<uni-datetime-picker type="datetime" v-model="dataForm.endTime" @change="changeLog" placeholder="请输入计划留校结束时间"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item label="家庭联系人姓名:" required name="name">
				<uni-easyinput type="text" v-model="dataForm.name" placeholder="请输入家庭联系人姓名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="家庭联系人电话:" required name="phone">
				<uni-easyinput type="number" v-model="dataForm.phone" placeholder="请输入家庭联系人电话"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="是否需要校内住宿:" required name="room">
				<uni-data-checkbox v-model="dataForm.room" :localdata="room" />
			</uni-forms-item>
			<uni-forms-item label="校外住宿地址:" required name="address">
				<view class="inputDisabled">
					<uni-easyinput type="text" v-model="dataForm.address" suffixIcon="down" disabled placeholder="请选择省/市/区(县)" @iconClick="visibleBtn"></uni-easyinput>
				</view>
				<uni-easyinput type="text" v-model="dataForm.address_detail" placeholder="请输入详细地址楼栋信息、门牌号"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<view class="footer">
			<view class="button" @click="submit">
				确认登记
			</view>
		</view>
		<piaoyi-cityPicker :column="column" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
	</view>
</template>，

<script>
	export default {
		data() {
			return {
				dataForm: {
					yuanying: '',
					startTime: null,
					endTime: null,
					name: null,
					phone: null,
					room: null,
					address: null,
					address_detail: null
				},
				rules: {
					yuanying: {
						rules: [{required: true, errorMessage: '请输入留校原因！'}]
					},
					startTime: {
						rules: [{required: true, errorMessage: '请输入计划留校开始时间!'}]
					},
					endTime: {
						rules: [{required: true, errorMessage: '请输入计划留校结束时间!'}]
					},
					name: {
						rules:[{required: true, errorMessage: '请输入家庭联系人姓名!'}]
					},
					phone: {
						rules:[{required: true, errorMessage: '请输入家庭联系人电话!'}]
					},
					room: {
						rules: [{required: true, errorMessage: '请输入是否需要校内住宿!'}]
					},
					address: {
						rules: [{required: true, errorMessage: '请输入校外住宿地址!'}]
					},
				},
				room: [{
					text: '需要', value: 0}, {text: '不需要', value: 1}],
				visible: false,
				maskCloseAble: true,
				column: 3
			}
		},
		methods: {
			changeLog(e) {
				console.log('change事件:', e);
			},
			visibleBtn() {
				console.log(1111)
				this.visible = true
			},
			confirm (val) {
				this.dataForm.address = val.name
				this.visible = false
			},
			cancel () {
				this.visible = false
			},
			submit() {
				this.$refs.dataForm.validate().then(res => {
					console.log('success', res);
					uni.navigateTo({
						url: '/pages/submitSuccess/index'
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx 20px 0rpx;
		font-size: 14px;
		line-height: 24px;
	}
	.address{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-radius: 8rpx;
		padding: 8rpx;
		margin: 10rpx 0rpx;
	}
	.inputDisabled{
		margin-bottom: 10rpx;
		::v-deep.uni-easyinput{
			.is-disabled {
				background-color: #fff !important;
				.uni-easyinput__placeholder-class{
					color: #999 !important;
				}
			}
		}
	}
	.footer{
		height: 150rpx;
		.button{
			height: 80rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			background-image: linear-gradient(to right, #6AA9FF, #3C88FF, #156DFF);
		}
	}
</style>
